<template>
    <div>
        <div class="guidePage">
              <!-- Swiper -->
            <div class="swiper-container guidePage-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="guidePageslide">
                            <img src="../../assets/2.png" alt="">
                            <h3>零距离的音乐艺术</h3>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="guidePageslide">
                            <img src="../../assets/3.png" alt="">
                            <h3>MOCC带你狂欢</h3>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="guidePageslide">
                            <img src="../../assets/5.png" alt="">
                            <h3>随心听</h3>
                            <van-button class="bott" type="primary" to="/recommend" size="mini">进入首页</van-button>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination guidePage-pagination"></div>
            </div>
        </div>
    </div>
</template>

<script>
    // https://www.swiper.com.cn/
    // $cnpm install swiper@5.3.6 -S
    import Swiper from "swiper"
    export default {
        mounted(){
            new Swiper('.guidePage-container', {
                pagination: {
                    el: '.guidePage-pagination',
                },
            });
        }
    }
</script>

<style lang="less" >

    .swiper-container {
        position: fixed !important; 
        top:0px;
        left:0px;
      width: 100%;
      height: 100%;
    }

    .guidePageslide{
        text-align: center;
        img{
            margin:0 auto;
            width: 300px;
            height: 315px;
            margin-top: 100px;
        }
        h3{
            color:#595959;
            margin: 5px;
        }
        .bott{
            width: 200px;
            height: 30px;
            margin-top: 40px;
            border-radius: 20px;
        }
    }
</style>